<template>
    <div class="usercenter" style="background:#f8f8f8;">
        <div ref="con">
            <div class="con">
                <div class="relation" v-if="info">
                    <div class="rela-name">
                        <div>
                            <p class="name">{{info.userName}}</p>
                            <p>编号：{{info.userId}}</p>
                        </div>
                        <!--<div class="pic" v-if="info.agencyLevel && info.agencyLevel !== 1">-->
                            <!--<QrcodeVue :value="value" :size="size" level="H"></QrcodeVue>-->
                        <!--</div>-->
                    </div>
                    <!--<button class="copy" :data-clipboard-text="value" style="color:#fff;border:none;background:transparent"  v-if="info.agencyLevel && info.agencyLevel !== 1">-->
                        <!--复制推广链接-->
                    <!--</button>-->
                </div>
            </div>
            <ul class="list-item" style="margin-top:10px;">
                <li class="item" style="margin-bottom:0px;border-bottom: 1px  solid #eaeaea;">
                    <p>会员用户</p>
                </li>
            </ul>
        </div>

        <div class="list-item">
            <LoadMore @loadMore="getmembers" :list="memberList" :pageNo="pageNo" :totalPage="totalPage"  :style="{height: calheight}"
                      v-if="memberList && memberList.length > 0 && calheight">
                <div class="item" slot-scope="loadSwiper">
                    <div class="flex">
                        <div>
                            <p class="text">{{loadSwiper.item.userName}} <span class="text-agency">{{loadSwiper.item.agencyName}}</span></p>
                            <p class="light-grey">手机号：{{loadSwiper.item.phoneNumber}}</p>
                        </div>
                        <div>
                            <p class="price">{{loadSwiper.item.performance || '0'}}</p>
                            <p class="font-24 light-grey">销售业绩</p>
                        </div>
                    </div>
                    <div @click="update(loadSwiper.item)" class="updateBtn">
                        <div class="btn yellow">提升用户等级</div>
                    </div>
                </div>
            </LoadMore>
        </div>
        <div class="agencyBox" v-show="showAgency" :style="showAgency ? 'z-index: 5;' : 'z-index: -2;'">
            <div class="blackbg"></div>
            <ul class="list-item agency-list-item">
                <li class="item" :class="selectedA.id === item.id ? 'selected' : ''" v-for="(item, index) in agencyList"
                    @click="selecteAgency(item)">
                    {{item.level === 9 ? '九星' : agency[item.level - 1]}}
                </li>
                <li class="item yellow flex">
                    <div style="width:50%;text-align: center;border-right: 1px solid #fff;" @click="cancelAngency">取消
                    </div>
                    <div style="width:50%;text-align: center" @click="confirm">确认</div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>

  import {getMemberInfo, updateMemberLevel, getMyMember, agencyList} from '_common/services/user'
  import QrcodeVue from 'qrcode.vue'
  import ClipboardJS from 'clipboard'
  import LoadMore from '_components/loadMore/loadMore'
  import base from '_common/services/base'
  import wxLogin from '_common/wxLogin.js'
  export default {
    name: 'rewardRecord',
    data() {
      return {
        showAgency: false,
        selectedA: {},
        info: {},
        memberList: [],
        agencyList: [],
        pageNo: 1,
        totalPage: 1,
        pageSize: 10,
        value: 'http://www.nineunity.com/register.html?shareCode=',
        size: 50,
        agency: ['一星', '二星', '三星', '九星'],
        calheight: null
      }
    },
    computed: {},
    async beforeMount() {
      await wxLogin(this.getData)
    },
    mounted () {
      this.$nextTick(() => {
        this.calheight = window.innerHeight - this.$refs.con.offsetHeight
        this.calheight = this.calheight + 'px'
      })

      this.getChildLevel()
    },
    methods: {
      getData() {
        this.getInfo()
        this.getmembers()
      },
      selecteAgency (item) {
        this.selectedA = item
      },
      cancelAngency () {
        this.showAgency = false
      },
      confirm () {
        let param = {
          userId: this.selectedItem.userId,
          agencyId: this.selectedA.id
        }
        if (this.selectedA.level <= this.selectedItem.level) {
            // 要提升的等级不得小于当前会员的等级
            this.$alertTip('提升等级必须大于当前会员等级！')
            return false
        }
        this.$confirm('确定要提升至该等级?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateMemberLevel(param).then(res => {
            if (res && res.code === 0) {
              this.$alertTip('更新成功')
              this.showAgency = false
              window.location.reload()
            }
            else {
              this.$alertTip(res.msg || '更新失败')
              this.showAgency = false
            }
          }, reject => {
            this.$alertTip('更新失败')
            this.showAgency = false
          })
        }).catch(() => {});

      },
      update (item) {
        this.selectedItem = item
        this.showAgency = true
        this.selectedA = this.agencyList[0]
      },
      getChildLevel () {
        agencyList().then(res => {
          if (res && res.code === 0) {
            this.agencyList = res.data
          }
          else {
            this.$alertTip(res.msg || '获取用户等级失败请稍后再试')
          }
        }, reject => {
          this.$alertTip('获取用户等级失败请稍后再试')
        })
      },
      getmembers () {
        getMyMember(this.pageNo, this.pageSize).then(res => {
          if (res && res.code === 0) {
            this.memberList = this.memberList.concat(res.data.data)
            this.pageNo++
            this.totalPage = res.data.totalsPage
          }
          else {
            this.$alertTip(res.msg || '获取失败请稍后再试')
          }
        }, reject => {
          this.$alertTip('获取失败请稍后再试')
        })
      },
      getInfo () {
        getMemberInfo().then(res => {
          if (res && res.code === 0) {
            this.info = res.data
            this.value = 'http://www.nineunity.com/register.html?shareCode=' + res.data.shareCode
            /*if (this.info.agencyLevel !== 1) {
                this.$nextTick(() => {
                    let clipboard = new ClipboardJS('.copy');
                    clipboard.on('success', () => {
                        this.$alertTip('复制成功！')
                        e.clearSelection();
                    });
                    clipboard.on('error', (e) => {
                        this.$alertTip('复制失败！')
                    });
                })
            }*/
          }
          else {
            this.$alertTip(res.msg || '获取失败请稍后再试')
          }
        }, reject => {
          this.$alertTip('获取失败请稍后再试')
        })
      }
    },
    components: {
      QrcodeVue,
      LoadMore
    }
  }
</script>
<style lang="less">
    @import "../../css/elementNew";
</style>
<style lang="less" scoped>
    @import "../../css/common";
    body {
        background: #f8f8f8;
        .usercenter {
            .light-grey {
                color: #999;
            }
            .con {
                background-color: #fff;
                padding: 20px 35px 20px 35px;
                .relation {
                    min-height: 230px;
                    background-image: url('');
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: top left;
                    box-sizing: border-box;
                    padding: 40px 24px 20px 36px;
                    font-size: 26px;
                    color: #fff;
                    border-radius: 6px;
                    .copy {
                        float: right;
                        margin-top: 36px;
                    }
                    .rela-name {
                        .flex(space-between, start);
                        .name {
                            font-size: 42px;
                            font-weight: bold;
                            margin-top: -10px;
                            margin-bottom: 20px;
                        }
                        .pic {
                            width: 100px;
                            height: 100px;
                            img {
                                width: 100%;
                            }
                        }
                    }
                }
            }
            .agencyBox {
                position: absolute;
                left: 0%;
                top: 0%;
                width: 100%;
                height: 100vh;
            }
            .list-item {
                &.agency-list-item {
                    width: 600px;
                    border-radius: 10px;
                    position: absolute;
                    z-index: 3;
                    left: 50%;
                    top: 50%;
                    margin-left: -300px;
                    transform: translate3d(0, -50%, 0);
                    background-color: #fff;
                    .item {
                        margin: 0px;
                        background-color: transparent;
                        &.selected {
                            color: @color_orange;
                        }
                        &.yellow {
                            background: @color_orange;
                            text-align: center;
                            color: #fff;
                            .flex(space-between, items-center);
                        }
                    }
                }
                .item {
                    padding: 25px 35px;
                    margin-bottom: 20px;
                    border-bottom: 2px solid #eaeaea;
                    font-size: 30px;
                    background-color: #fff;
                    color: #333;
                    &:last-child {
                        border-bottom: none;
                    }
                    &:first-child {
                        margin-top: 0px;
                    }
                    &:nth-child(2) {
                        margin-top: 0px;
                    }
                    .flex {
                        .flex(space-between);
                        .text {
                            font-size: 28px;
                            margin-bottom: 10px;
                            .text-agency{
                                padding:4px 8px;
                                font-size:24px;
                                border-radius: 6px;
                                margin-left:10px;
                                border:2px solid #f3a13a;
                            }
                        }
                        .font-24 {
                            font-size: 24px;
                        }
                        .price {
                            font-size: 36px;
                            color: #f3a33f;
                        }
                    }
                    .updateBtn {
                        width: 100%;
                        color: @color_orange;
                        padding-top: 20px;
                        overflow: hidden;
                        .btn {
                            height: 50px;
                            width: 180px;
                            border-radius: 25px;
                            margin-left: 16px;
                            line-height: 50px;
                            text-align: center;
                            font-size: 24px;
                            border: 2px solid @color_gray;
                            float: right;
                            &.yellow {
                                border-color: @color_orange;
                                color: @color_orange;
                            }
                        }
                    }
                }
            }

        }
    }


</style>